
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>

</head>
<body>
    
    <div id="app">
        <!-- 
            分支结构:
                v-if
                v-else
                v-else-if
                v-show 的原理: 控制元素样式是否显示 display:none

            v-if 和 v-show 的区别
                - v-if 控制元素是否渲染到页面
                - v-show 控制元素是否显示(已经渲染到页面)
        -->
        <div v-if="score >= 90">优秀</div>
        <div v-else-if="score >= 80">良好</div>
        <div v-else-if="score >= 70">一般</div>
        <div v-else>比较差</div>
        <div><input type="text" v-model='score'></div>
        <div v-show='flag'>测试v-show</div>
        <button @click='handle'>显示v-show</button>
    </div>

    <script type="text/javascript">
       var vm = new Vue({
            el:'#app',
            data:{
                score:0,
                flag:false

            },
            methods:{
                handle:function(event){
                    this.flag = !this.flag;
                }
            }
       })      
       
    </script>
</body>
</html>


       